<template lang="html">
  <div class="register">
    <!-- 常见问题页面 -->
    <!-- <loading :showLoading='showLoading'></loading> -->

    <div class="subTitle">注册流程</div>
    <div class="mainTitle">梨客注册流程</div>

    <div class="block">
      <div class="titleBox clearfix">
        <div class="pull-left num">1</div>
        <div class="pull-left sub">下载安装巨梨App</div>
      </div>

      <img src="../../assets/images/app.png" class='mainLogo'>

      <div class="titleBox clearfix">
        <div class="pull-left num">2</div>
        <div class="pull-left sub">进行注册登录</div>
      </div>

      <img src="../../assets/images/register/1.jpg" class='img1 hasShadow'>

      <div class="titleBox clearfix">
        <div class="pull-left num">3</div>
        <div class="pull-left sub">找到邀请人获取邀请码或邀请链接</div>
        <div class="subText">注:邀请人为梨客或梨客中心</div>
      </div>

      <img src="../../assets/images/register/2.jpg" class='img2'>

      <div class="titleBox clearfix">
        <div class="pull-left num">4</div>
        <div class="pull-left sub">进入App-“我的”-“立即升级梨客”，填写邀请码支付费用即升级成为梨客</div>
      </div>

      <img src="../../assets/images/register/3.jpg" class='img3'>
    </div>
    <br><br><br>
    <div class="mainTitle">商家注册流程</div>

    <div class="block">
      <div class="titleBox clearfix">
        <div class="pull-left num">1</div>
        <div class="pull-left sub">找到推荐梨客中心让其发出注册邀请链接</div>
      </div>

      <img src="../../assets/images/register/2.jpg" class='img2'>

      <div class="titleBox clearfix">
        <div class="pull-left num">2</div>
        <div class="pull-left sub">打开邀请链接填写注册信息</div>
      </div>

      <img src="../../assets/images/register/4.jpg" class='img1'>

      <div class="titleBox clearfix">
        <div class="pull-left num">3</div>
        <div class="pull-left sub">提交注册信息即注册成功</div>
      </div>

      <div class="titleBox clearfix">
        <div class="pull-left num">4</div>
        <div class="pull-left sub">下载“巨梨商家版”App或登录电脑端网站(http://business.ai3010.com)使用注册的账号进行登录</div>
      </div>

      <img src="../../assets/images/app2.png" class='mainLogo'>

      <div class="titleBox clearfix">
        <div class="pull-left num">5</div>
        <div class="pull-left sub">进入“门店管理”模块申请店铺入驻，通过审核即开店成功，即可查看店铺二维码</div>
      </div>

      <img src="../../assets/images/register/5.jpg" class='img3'>

      <div class="titleBox clearfix">
        <div class="pull-left num">6</div>
        <div class="pull-left sub">支付服务费用即可开通“商品管理”功能上架商品</div>
      </div>

      <img src="../../assets/images/register/6.jpg" class='img1'>
    </div>


    <br><br><br>
    <div class="mainTitle">梨客中心注册流程</div>

    <div class="block">
      <div class="titleBox clearfix">
        <div class="pull-left num">1</div>
        <div class="pull-left sub">找到推荐梨客中心让其发出注册邀请链接</div>
      </div>

      <img src="../../assets/images/register/2.jpg" class='img2'>

      <div class="titleBox clearfix">
        <div class="pull-left num">2</div>
        <div class="pull-left sub">打开邀请链接填写注册信息</div>
      </div>

      <img src="../../assets/images/register/7.jpg" class='img3'>

      <div class="titleBox clearfix">
        <div class="pull-left num">3</div>
        <div class="pull-left sub">提交注册信息完成注册</div>
      </div>
      <div class="subText">说明：注册成功后处于未激活状态</div>

      <div class="titleBox clearfix">
        <div class="pull-left num">4</div>
        <div class="pull-left sub">联系巨梨客服确认收付款后，协助完成账号激活</div>
      </div>

      <div class="subText">说明：关注“巨梨”微信公众号，联系财务客服</div>

      <img src="../../assets/images/register/8.jpg" class='endIcon'>
    </div>
    
  </div>
</template>
<script>
export default {
  data () {
    return {
      showLoading:false
    }
  },
  methods:{
  	tourl(url,query){
      tools.router.push({path:url,query:query || {}})
    }
  },
  mounted(){
    var _this = this;
    tools.setTitle('注册流程');
  },
  components:{

  }
}
</script>

<style scoped lang='scss'>

  $browser-default-font-size: 75px !default;
  @function pxTorem($px) {
    @return $px / $browser-default-font-size * 1rem;
  }

  .register{
    user-select: none !important;
    background: #16120f;
    position: relative;
    width: 100%;
    height: 100%;
    padding: pxTorem(68px) 0;
    overflow-y: scroll;

    .mainLogo{
      width: pxTorem(150px);
      height: pxTorem(150px);
      margin-bottom: pxTorem(20px);
      border-radius: pxTorem(10px);
      margin: pxTorem(80px) auto;
      display: block;
    }

    .subTitle{
      color: #f9de0b;
      text-align: center;
      font-size: pxTorem(45px);
      margin-bottom: pxTorem(50px);
    }

    .mainTitle{
      color: #f9de0b;
      text-align: center;
      font-size: pxTorem(65px);
    }

    .block{
      padding:0 pxTorem(50px);

      .titleBox{
        margin-top: pxTorem(90px);
        .num{
          font-size: pxTorem(60px);
          color: #f5ee00;
          margin-right: pxTorem(16px);
        }
        .sub{
          color: #f5ee00;
          font-size: pxTorem(40px);
          padding-top: pxTorem(10px);
          max-width: pxTorem(580px);
        }
      }

      .subText{
        color: #f5ee00;
        font-size: pxTorem(30px);
        padding-left: pxTorem(50px);
        max-width: pxTorem(600px);
      }

      .endIcon{
        width: pxTorem(226px);
        height: pxTorem(204px);
        display: block;
        margin:pxTorem(40px) auto;
      }

      .img1{
        width: pxTorem(347px);
        height: pxTorem(618px);
        display: block;
        margin:pxTorem(80px) auto;
      }

      .img2{
        width: pxTorem(412px);
        height: pxTorem(621px);
        display: block;
        margin:pxTorem(80px) auto;
      }

      .img3{
        width: pxTorem(614px);
        height: pxTorem(494px);
        display: block;
        margin:pxTorem(80px) auto;
      }

      .hasShadow{
        box-shadow: 0 0 pxTorem(200px) rgba(255,255,255,.5);
      }

    }

    .fs25{
      font-size: pxTorem(25px) !important;
    }
    .fs20{
      font-size: pxTorem(20px) !important;
    }
  }

</style>
